<!-- 我的分享 -->
<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" class="gray" v-if="isshow">
		<view slot="top">
			<u-tabs :list="tabList" @click="changeTab" :scrollable="false" 
			:current="current"
			lineHeight="10" lineWidth="40"></u-tabs>
		</view>
		<!-- 课程 -->
		<view class="list"  v-if="current == 0" >
		<courseCard v-for="item,index in dataList" :key="index" :item="item" @goDetail="goCourseDetail"/>
		</view>
		<!-- 话题 -->
		<topItem :dataList="dataList" @goDetail="goTopicDetail" v-else />
	</z-paging>
</template>

<script>
	import {
		shareCourseRecords,
		shareTopicRecords
	} from '@/apis/apis.js'
	import courseCard from '../modules/courseCard.vue'
	import topItem from '../modules/topic_item.vue';
	export default {
		components: {
			courseCard,
			topItem
		},
		data() {
			return {
				dataList: [],
				tabList: [{
						name: '课程'
					},
					{
						name: '话题'
					}
				],
				current: 0,
				isshow:false
			}
		},
		onShow() {
			this.isshow = true
		},
		onHide() {
			this.isshow = false
		},
		methods: {
			queryList(pageNum, pageSize) {
				console.log(this.current)
				if (this.current == 0) {
					shareCourseRecords({
						pageNum: pageNum,
						pageSize: pageSize
					}).then(res => {
						this.dataList = res.data
						this.$refs.paging.complete(res.data);
					})
				} else {
					shareTopicRecords({
						pageNum: pageNum,
						pageSize: pageSize
					}).then(res => {
						// console.log(res)
						res.data.forEach(el=>{
							if(el.workKey){
								el.words = el.workKey.split(',')
							}
						})
						this.dataList = res.data
						this.$refs.paging.complete(res.data);
					})
				}
			},
			// 课程
			goCourseDetail(e) {
				uni.navigateTo({
					url: '/pages/index/courseItem/courseItem?id=' + e
				})
			},
			// 话题
			goTopicDetail(e) {
				console.log(e);
				uni.navigateTo({
					url: '/pages/topic/topicDetail/topicDetail?id=' + e.id
				})
			},
			changeTab(e) {
				console.log(e)
				this.current = e.index;
				this.queryList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gray {
		background-color: #F8F8F8;
	}
	.list{
		padding: 30rpx 30rpx 0;
	}
</style>
